<%-- 
    Document   : exerciseSelection
    Created on : 21.02.2011, 20:58:59
    Author     : felix
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!-- div für die Listenansicht der ausgewählten Übungen für einen Trainingsplan-->

<!-- angelehnt an jBasket: http://www.webresourcesdepot.com/creating-a-slick-ajaxed-add-to-basket-with-jquery-and-php-->
<div id="mainWrap">
    <div id="slidingTopWrap">
            <div id="slidingTopContent">
                    <div id="basketWrap">
                            <!-- Überschrift -->
                            <div id="basketTitleWrap">
                                    Trainingsplan <span id="notificationsLoader"></span>
                            </div>
                            <!-- alle Übungen in einer Liste -->
                            <div id="basketItemsWrap">
                                    <ul>
                                    <li></li>
                                    <%@ include file="basketOutput.jsp" %>
                                    </ul>
                            </div>
                    </div>
            </div>
    </div>
</div>

<!-- div für alle Übungen nach Kategorien -->
<!-- Accordion angelehnt an http://www.p51labs.com/accordion/-->
<div id="vertical_container" >
    <%
        // Alle Kategorien laden
        String[][] categories = db.categoriessport.getCategoriesByTypeofsportId(session.getAttribute("typeofsport").toString());

        // Für jede Kategorie  ...
        for(String category[]: categories){

            // Überschrift schreiben und Accordionklase zuordnen, damit die Kategorie aufklappbar ist
            out.print("<h1 class=\"accordion_toggle\">\n");
            out.print((db.categories.getCategorieNameById(category[0])).toString());
            out.print(" (" + db.exercises.countExercisesByCategory(category[0]) + " Übungen)</h1>\n");

            // div-Inhalts-Kontainer zur Überschrift erstellen
            out.print("<div class=\"accordion_content\">\n");

                // vertikal aufklappbaren Kontainer erstellen
                out.print("<div id=\"vertical_nested_container\">\n");

                // Alle Übungen für die Kategorie laden
                String[][] exercises = db.exercises.getAllExercisesByCategoryId(category[0]);

                // Für jede Übung ...
                for(String exercise[]: exercises){
                    // Erstelle eine Überschrift
                    out.print("<h3 class=\"vertical_accordion_toggle\">" + exercise[0] + " (" + exercise[10] + ")</h3>\n");
                    // Erstelle einen aufklappbaren Kontainer
                    out.print("<div class=\"vertical_accordion_content\">\n");
                        // Lade alle Bilder für die Übung
                        String[][] pictures = db.pictures.getAllPicturesByExerciseId(exercise[1]);

                        // Für jedes Bild ...
                        for(String picture[]: pictures) {
                            // Für das Bild ein
                            out.print("<img src=\"pict/exercise/" + picture[3] + "\" style=\"float:right; margin-left:5px;\">");
                        }

                        // Erstelle Bild, um Übung zur Liste hinzufügen zu lassen
                        out.print("<div class=\"productPriceWrapRight\">");
                            out.print("<a href=\"basket.jsp?action=addToBasket&exercise=" + exercise[1] + "\" onClick=\"return false;\">");
                                out.print("<img src=\"pict/addToBasket.png\" alt=\"Add To Basket\" id=\"featuredProduct_" + exercise[1] + "\" />");
                            out.print("</a>");
                        out.print("</div>");

                        // Umbruch ...
                        out.print("<br/>");

                        // Definitionsliste mit den Details der Übung erstellen
                        out.print("<dl>");

                        if(!exercise[9].equals("")){
                            out.print("<dt>");
                            out.print("<strong>Ziel: </strong>");
                            out.print("</dt><dd> ");
                            out.print(exercise[9]);
                            out.print("</dd>");
                        }

                        if(!exercise[2].equals("")){
                            out.print("<dt>");
                            out.print("<strong>Ablauf: </strong>");
                            out.print("</dt><dd> ");
                            out.print(exercise[2]);
                            out.print("</dd>");
                        }

                        if(!exercise[3].equals("")){
                            out.print("<dt>");
                            out.print("<strong>Hinweise: </strong>");
                            out.print("</dt><dd> ");
                            out.print(exercise[3]);
                            out.print(" </br></dd>");
                        }

                        if(!exercise[4].equals("")){
                            out.print("<dt>");
                            out.print("<strong>Teilnehmer: </strong>");
                            out.print("</dt><dd> ");
                            out.print(exercise[4] + " - " + exercise[5]);
                            out.print("</dd>");
                        }

                        if(!exercise[6].equals("")){
                            out.print("<dt>");
                            out.print("<strong>Aufbau: </strong>");
                            out.print("</dt><dd> ");
                            out.print(exercise[6]);
                            out.print("</dd>");
                        }

                        if(!exercise[7].equals("")){
                            out.print("<dt>");
                            out.print("<strong>Hilfsmittel: </strong>");
                            out.print("</dt><dd> ");
                            out.print(exercise[7]);
                            out.print("</dd>");
                        }

                        if(!exercise[8].equals("")){
                            out.print("<dt> ");
                            out.print("<strong>Dauer: </strong>");
                            out.print("</dt><dd> ");
                            out.print(exercise[8] + " Minuten");
                            out.print("</dd>");
                        }

                        out.print("</dl>");

                    out.print("</div>\n");
                }
                out.print("</div>\n");
            out.print("</div>\n");
        }
    %>
</div>

<!-- Floaten beenden-->
<div style="clear: left;"></div>
<br/>
